<script setup lang="ts">
import { InputProps } from '@/types/common/components.ts';
import { computed, ref } from 'vue';
const props = withDefaults(defineProps<InputProps>(), {
  modelValue: '',
  type: 'text',
  placeholder: '',
  iconSuffix: '',
  iconPrefix: '',
  rule: () => {
    return {
      req: false,
      message: '',
    };
  },
});
// defineModel() vue3 简单的 v-model绑定
const emit = defineEmits(['update:modelValue']);
// 显示错误信息
const info = ref<boolean>(false);
// 用于标记password类型显示隐藏
const passwordSee = ref<boolean>(false);
// 前缀
const prefix = ref<string>(props.iconPrefix);
// 后缀
const suffix = ref<string>(props.iconSuffix);
// 输入框类型
const type = ref<string>(props.type);
if (type.value === 'password') {
  suffix.value = 'icon-com-eye';
}
const updateValue = (event: any): void => {
  emit('update:modelValue', event.target.value);
};
// 计算class 属性
const inputSvgClass = computed(() => {
  let className = '';
  if (prefix.value !== '') {
    className += ' portal-input-prefix';
  }
  if (suffix.value !== '') {
    className += ' portal-input-suffix';
  }
  return className;
});

// 获取焦点事件
const inputFocus = (event: any) => {
  emit('update:modelValue', event.target.value);
};

// 失去焦点事件
const inputBlur = (event: any) => {
  emit('update:modelValue', event.target.value);
  info.value =
    props.rule.req && (event.target.value === undefined || event.target.value === null || event.target.value === '');
};

// 显示密码
const passwordShow = (event: any) => {
  passwordSee.value = true;
  suffix.value = 'icon-com-eye_crossed';
  type.value = 'text';
  event.preventDefault();
};
// 隐藏密码
const passwordHide = (event: any) => {
  passwordSee.value = false;
  suffix.value = 'icon-com-eye';
  type.value = 'password';
  event.preventDefault();
};
</script>
<template>
  <div class="portal-input" :class="info === true ? 'active' : ''">
    <input
      class="portal-input-inner"
      :class="inputSvgClass"
      :type="type"
      autocomplete="off"
      :placeholder="props.placeholder"
      :value="props.modelValue"
      @input="updateValue"
      @focus="inputFocus"
      @blur="inputBlur"
    />
    <div v-if="prefix !== ''" class="portal-svg-prefix">
      <svg-icon :name="prefix" />
    </div>
    <div v-if="suffix !== '' && props.type !== 'password'" class="portal-svg-suffix">
      <svg-icon :name="suffix" />
    </div>
    <div
      v-if="props.type === 'password' && type === 'password' && passwordSee === false"
      class="portal-svg-suffix"
      @click.stop="passwordShow($event)"
    >
      <svg-icon :name="suffix" />
    </div>
    <div
      v-if="props.type === 'password' && type === 'text' && passwordSee"
      class="portal-svg-suffix"
      @click.stop="passwordHide($event)"
    >
      <svg-icon :name="suffix" />
    </div>
    <div v-if="info" class="portal-info-message">
      {{ props.rule.message }}
    </div>
  </div>
</template>

<style lang="scss" scoped>
.portal-input {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  input {
    background: none;
    outline: none;
    border: 0;
  }
  .portal-input-inner {
    border: 1px solid #dcdfe6;
    width: 100%;
    padding: 0 20px;
    height: 100%;
    background-image: none;
    border-radius: 4px;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    line-height: 40px;
    outline: none;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: 0;
  }
  .portal-input-inner:focus {
    border-color: #409eff;
  }
  .portal-input-inner.portal-input-prefix {
    padding-left: 40px;
    position: relative;
    svg {
      fill: #606266;
    }
  }
  .portal-input-inner.portal-input-suffix,
  .portal-input-inner.portal-input-password {
    padding-right: 40px;
    svg {
      fill: #606266;
    }
  }
  .portal-svg-prefix {
    position: absolute;
    height: 100%;
    left: 12px;
    top: 0;
    text-align: center;
    color: #c0c4cc;
    transition: all 0.3s;
    align-items: center;
    display: flex;
    cursor: pointer;
  }
  .portal-svg-suffix {
    position: absolute;
    height: 100%;
    right: 12px;
    top: 0;
    text-align: center;
    color: #c0c4cc;
    transition: all 0.3s;
    align-items: center;
    display: flex;
    cursor: pointer;
    z-index: 1000;
  }
  .portal-info-message {
    position: absolute;
    height: 20px;
    bottom: -20px;
    left: 10px;
    right: 10px;
    font-size: 0.8rem;
    color: #f56c6c;
  }
}
.portal-input.active {
  .portal-input-inner {
    border-color: #f56c6c;
  }
}
</style>
